<template>
  <div class="pay">
    <CustomNavBar :title="t('Institutional Transfer')"> </CustomNavBar>
    <div class="container">
      <div class="card">
        <div style="margin-top: 10px; color: rgb(204, 204, 204)">
          {{t('ERCDeposit')}}
        </div>
        <div class="van-cell van-field van-field--disabled van-field--min-height">
          <div class="van-cell__value van-cell__value--alone van-field__value">
            <div class="van-field__body">
              <textarea disabled="disabled"
                class="van-field__control">{{ detail.erc_deposit }}</textarea>
              <div class="van-field__right-icon">
                <i class="van-icon van-icon-records"><!----></i>
              </div>
            </div>
          </div>
        </div>
        <div style="margin-top: 10px; color: rgb(204, 204, 204)">
          {{t('TRCDeposit')}}
        </div>
        <div class="van-cell van-field van-field--disabled van-field--min-height">
          <div class="van-cell__value van-cell__value--alone van-field__value">
            <div class="van-field__body">
              <textarea disabled="disabled"
                class="van-field__control">{{ detail.trc_deposit }}</textarea>
              <div class="van-field__right-icon">
                <i class="van-icon van-icon-records"><!----></i>
              </div>
            </div>
          </div>
        </div>
        <div style="margin-top: 10px; color: rgb(204, 204, 204)">
          {{t('BEPDeposit')}}
        </div>
        <div class="van-cell van-field van-field--disabled van-field--min-height">
          <div class="van-cell__value van-cell__value--alone van-field__value">
            <div class="van-field__body">
              <textarea disabled="disabled"
                class="van-field__control">{{ detail.bep_deposit }}</textarea>
              <div class="van-field__right-icon">
                <i class="van-icon van-icon-records"><!----></i>
              </div>
            </div>
          </div>
        </div>
        <div style="margin-top: 10px; color: rgb(204, 204, 204)">
          {{t('BTCDeposit')}}
        </div>
        <div class="van-cell van-field van-field--disabled van-field--min-height">
          <div class="van-cell__value van-cell__value--alone van-field__value">
            <div class="van-field__body">
              <textarea disabled="disabled"
                class="van-field__control">{{ detail.btc_deposit }}</textarea>
              <div class="van-field__right-icon">
                <i class="van-icon van-icon-records"><!----></i>
              </div>
            </div>
          </div>
        </div>
        <div style="margin-top: 10px; color: rgb(204, 204, 204)">
          {{t('USDT Real-time exchange rate for rupee:')}}
        </div>
        <div class="van-cell van-field van-field--disabled">
          <div class="van-cell__value van-cell__value--alone van-field__value">
            <div class="van-field__body">
              <input type="text" disabled="disabled" :value="detail.usdt2rubee" class="van-field__control van-field__control--right" />
            </div>
          </div>
        </div>
        <div style="margin-top: 10px; color: rgb(204, 204, 204)">
          {{t('BTC Real-time exchange rate for rupee:')}}
        </div>
        <div class="van-cell van-field van-field--disabled">
          <div class="van-cell__value van-cell__value--alone van-field__value">
            <div class="van-field__body">
              <input type="text" disabled="disabled" :value="detail.btc2rubee" class="van-field__control van-field__control--right"/>
            </div>
          </div>
        </div>
        <div class="van-cell">
          <div class="van-cell__title">
            <span>{{t('Upload Screenshot')}}</span>
          </div>
        </div>
        <div class="uploadFile-container">
          <div class="uploadFile">
            <van-uploader v-model="screenshot" max-count="1" accept="image/*" :preview-image="false"
              :after-read="uploadImage">
              <img src="@/assets/images/uploadImgage.png" width="50" height="50">
            </van-uploader>

            <template v-if="screenshotUrl">
              <img :src="screenshotUrl" width="100%" height="100%">

              <div class="delete" @click="deleteImg">x</div>
            </template>
          </div>
        </div>
      </div>
      <button class="btns van-button van-button--primary van-button--normal van-button--block" style="
          color: white;
          background: linear-gradient(
            to left,
            rgb(98, 247, 146),
            rgb(99, 253, 219)
          );
          border: 0px;
          width: 100%;
        " @click="handleSubmit">
        <div class="van-button__content">
          <span class="van-button__text">{{t('Institutional Transfer')}}</span>
        </div>
      </button>
      <p style="margin-top: 20px">
       {{t(`1. USTD or BTC is a fixed address, and the address will not change.Please upload a successful screenshot after depositing.`)}}
      </p>
      <p style="margin-top: 10px">
        {{t('2. USDT or BTC shall be subject to the actual exchange rate of the day.')}}
      </p>
      <p style="margin-top: 10px">
        {{t('3. If the recharge cannot be used or there is a problem, please contact Customer Service Manager')}}
      </p>
      <p style="margin-top: 10px">
        {{t('4. Deposit time is from 9:00 AM to 22:00 PM.')}}
      </p>
    </div>
    <!-- <van-cell title="单元格" value="内容" style="display: none;" /> -->
  </div>
</template>
<script setup>
import { ref, onBeforeMount } from 'vue'
import { useRoute } from 'vue-router'
import { get, post } from '@/utils/request'
import { showSuccessToast, showLoadingToast, closeToast, showFailToast, showToast } from 'vant'
import { t } from '@/languages'
const $route = useRoute()

const loading = ref(false)

const screenshot = ref([])
const screenshotUrl = ref('')
const amount = ref(50000)
const detail = ref({})

function deleteImg() {
  screenshot.value = []
  screenshotUrl.value = ''
}

async function uploadImage(image) {
  try {
    showLoadingToast({ message: 'Upload In...' })
    const FD = new FormData()
    FD.append('file', image.file) // file 是接口中定义的的文件名
    const res = await post(`/api/app/uploadimage/`, FD, {})
    if (res.data.length) {
      screenshotUrl.value = res.data[0]
      console.log('上传图片url:' + screenshotUrl.value)
    }
  } catch (error) {
    console.log(error)
  } finally {
    closeToast()
  }
}

async function getSysConfig(image) {
  try {
    const res = await get(`/api/app/getsysconfig/`, {})
    console.log(res)

    res.forEach(v => detail.value[v.key] = v.value)

  } catch (error) {
    console.log(error)
  }
}

async function handleSubmit() {
  if (loading.value) return

  loading.value = true
  amount.value = $route.query.amount
  // console.log('支付金额：' + amount.value)
  if(!screenshot_url) {
    showToast(t('Please upload the Screenshot'))
    return
  }
  try {
    showLoadingToast()
    const res = await post(`/api/app/deposit/`, {
      amount: amount.value,
      type: 0,
      screenshot_url: screenshotUrl.value
    })

    console.log(res)
    showSuccessToast(t('Payment Success'))

    deleteImg()
  } catch (error) {
    console.log(error)
    showFailToast(error.msg)
  } finally {
    loading.value = false
  }

}

onBeforeMount(getSysConfig)

</script>
<style lang="scss" scoped>
.van-icon-records {
  font-size: .53333rem
}

.van-field__control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.08rem 0;
  color: #323233;
  line-height: 0.5rem;
  min-height: 1rem;
  text-align: left;
  background-color: transparent;
  border: 0;
  resize: none
}

.van-field__control::-webkit-input-placeholder {
  color: #c8c9cc
}

.van-field__control::placeholder {
  color: #c8c9cc
}

.van-field__control:disabled {
  color: #c8c9cc;
  cursor: not-allowed;
  opacity: 1;
  -webkit-text-fill-color: #c8c9cc
}

.van-field__control:read-only {
  cursor: default
}

.van-field__control--right {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  text-align: right
}

.pay.van-field__control:disabled {
  color: #62f8a2 !important;
  -webkit-text-fill-color: #62f8a2
}

.pay .container {
  padding: 0 .53333rem;
  padding-bottom: 2.13333rem;
  overflow: hidden
}

.pay .container .card {
  margin-top: .53333rem;
  padding: .13333rem .26667rem;
  border-radius: .26667rem
}

.pay .container .uploadFile-container {
  margin-top: .26667rem;
  padding-bottom: .53333rem
}

.pay .container .uploadFile-container .uploadFile {
  background: #0e1822;
  border: .02667rem solid #2b4e5a;
  height: 5.33333rem;
  border-radius: .16rem;
  padding: .13333rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative
}

.pay .container .uploadFile-container .uploadFile .delete {
  position: absolute;
  right: 0;
  top: 0;
  background-color: rgba(0, 0, 0, .5);
  width: .8rem;
  height: .8rem;
  border-radius: 0 0 0 .26667rem;
  text-align: center;
  line-height: .8rem;
  color: #fff
}

.pay .container .exchange {
  margin-top: .26667rem;
  border: .02667rem solid #ccc;
  border-radius: .21333rem;
  padding: .26667rem;
  color: #ccc
}

.pay .container .exchange .left,
.pay .container .exchange .right {
  display: flex;
  margin-bottom: .13333rem;
  justify-content: space-between
}

.pay .van-field__body {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
}

.pay .van-field__control {
  color: #62f8a2 !important;
  -webkit-text-fill-color: #62f8a2;
}

.pay .container .btns {
  margin-top: .26667rem
}

.pay .container .van-button {
  border-radius: .26667rem;
  height: 1.33333rem
}

.pay .van-cell {
  padding-left: .53333rem;
  padding-right: .26667rem;
  border-radius: .16rem;
  background: #0e1822;
  border: .02667rem solid #2b4e5a;
  margin-top: .26667rem
}

.pay .van-cell__title,
.pay .van-field__label {
  color: #ccc;
  font-size: .37333rem
}

.pay .van-cell__value,
.pay .van-field__control {
  color: #ccc
}

.pay .van-cell:after {
  border: 0
}

.pay .van-field__control::placeholder {
  color: #6d6d6d
}

.pay .van-button__text {
  color: #0d111a;
  font-weight: 600
}
</style>
